/* 游戏正式界面的样式文件 */

.game-box {
    /* 设置宽度和最大宽度 */
    width: 100%;
    max-width: 1200px;
    /* 居中展示 */
    margin: auto;
    display: none;
    flex-direction: column;
    /* 占满整个屏幕高度 */
    height: 100vh;
}

.banker-box {
    border: 1px solid #acacac;
    height: 50%;
}

.player-box {
    border: 1px solid #acacac;
    margin-top: 50px;
    height: 50%;
    /* 弹性盒子，让四个玩家区域在同一行中展示 */
    display: flex;
}

.player-item-box {
    /* 各占25%宽度 */
    width: 25%;
    border: 1px solid #acacac;
    /* 弹性盒子布局 */
    display: flex;
    /* 次轴：居中 */
    align-items: center;
    /* 主轴：居中 */
    justify-content: center;
    /* 相对定位（父相子绝） */
    position: relative;
}

.with-player-box {
    /* 弹性盒子布局 */
    display: flex;
    /* 弹性盒子：主轴为纵向 */
    flex-direction: column;
    /* 次轴：居中 */
    align-items: center;
    /* 主轴：居中 */
    justify-content: center;
    height: 100%;
    width: 100%;
}

.display-view-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.info-view,
.cards-view {
    border-bottom: 1px dotted #acacac;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.display-cards {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.display-cards>li {
    height: 60px;
    width: 20px;
    border: 1px solid #000;
    border-radius: 5px;
    margin: 0px 2px;
}

.info-view>p {
    padding: 2px 0px;
}

.procedure-view-box {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/* 玩家爆掉界面 */

.boom-view-box {
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #cdcdcd;
    height: 100%;
    width: 100%;
}

.display-cards {
    display: flex;
}


/* 
切牌、押注界面。
,表示并集选择器，多个选择器使用同一套样式规则
 */

.cut-box,
.bet-box {
    /* 弹性盒子布局 */
    display: flex;
    /* 弹性盒子：主轴为纵向 */
    flex-direction: column;
    /* 次轴：居中 */
    align-items: center;
    /* 主轴：居中 */
    justify-content: center;
}

.with-player-box button {
    padding: 10px;
    /* 外边距 */
    margin: 5px;
}

.without-player-box {
    background-color: #acacac;
    height: 100%;
    width: 100%;
    /* 弹性盒子 */
    display: flex;
    /* 次轴：居中 */
    align-items: center;
    /* 主轴：居中 */
    justify-content: center;
}


/* 隐藏非当前玩家的界面 */

.hidden-player {
    display: none;
}


/* 隐藏非当前流程的界面 */

.need-hidden {
    display: none;
}